<template>
  <div>
    <div class="c-ph24 c-bd-b10">
      <div class="c-pt30 c-flex-row c-pb32">
        <div class="c-ww210 c-maxh140 c-text-hidden c-p c-br10">
          <img class="c-w100 imgCloseBig" :src="$addXossFilter(detailInfo.cover, require('../../../assets/defult270.png'))" />
        </div>
        <div class="c-flex-column c-ml20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div>
            <div class="c-fs24 c-text-ellipsis1 c-fc-xblack c-lh34">{{detailInfo.name}}</div>
            <div class="c-flex-row c-fs20 c-pt26 c-fc-gray c-lh c-lh28 c-justify-sb c-aligni-center" v-if="detailInfo.endAt!=0">有效期至：{{detailInfo.endAt==0?'':detailInfo.endAt}}</div>
            <div class="c-flex-row c-fs20 c-pt24 c-fc-gray c-lh c-lh28 c-justify-sb c-aligni-center" :class="detailInfo.endAt==0?'c-mt48':''">共{{detailInfo.detailNum}}节</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ph24">
      <h2 class="c-ph24 c-fw-n c-fc-xblack c-fs28 c-fw-b c-pt20 c-textAlign-c">课程列表</h2>
      <div class="theme-bg-gradient c-center c-mt14 c-ww32 c-hh6 c-br3"></div>
      <div class="c-bd-t1 liveList" :key="index" v-for="(item,index) in liveList">
        <div class="c-pt24">
          <div class="c-fs24 c-fc-xblack"><span class="c-vcAlign-middle c-inlineblack c-ww440 c-text-ellipsis2">{{item.name}}</span></div>
        </div>
        <div class="c-flex-row c-justify-sb c-aligni-center c-pb24">
          <!-- {{item.status==2?'直播已结束':''}} -->
          <div class="c-fs20 c-fc-gray c-pt10">{{getTimeByDate(item.startAt)}} <span class="spot" v-if="item.status==1"></span><span class="c-fc-xlred" v-if="item.status==1">直播中</span></div>
          <div class="c-fs22 c-fc-gray" v-if="item.status==0 &&item.isJoinLiveRoom==0">在直播前十分钟可进入</div>
          <div class="c-fs22 c-fc-gray" v-if="item.status==2 && item.isPlayBack==0">直播结束</div>
          <div class="c-fs22 c-fc-gray" v-if="item.status==2 && item.isPlayBack==1">回放生成中</div>
          <div class="c-fs22 c-fc-gray" v-if="item.status==2 && item.isPlayBack==3">已过期</div>
          <!-- 3为下架 -->
          <div class="c-fs22 c-fc-gray" v-if="item.status==3">已过期</div>
          <div class="c-fs22 c-fc-smblue" v-if="item.status==2 && item.isPlayBack==2" @click="review(item.liveClassId,item.socialRoomId,item.detailId,item.isJoinSocial)"><span class="icon-shipin6 c-mr10"></span>查看回放</div>
          <div class="c-fs22 c-fc-white c-ww120 c-hh42 c-lh42 c-textAlign-c c-br25 theme-bg-gradient" v-if="item.status==1 ||item.isJoinLiveRoom==1" @click="getliveRoomUrl(item.detailId)">进入教室</div>
        </div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂未安排课节哦"></loading-status-tem>
    <cj-popup v-model="showEnterPcTip" round :closeable="true" close-icon-position="top-right" close-icon="icon-guanbi" @closed="showEnterPcTip=false">
      <div class="c-flex-column c-bg-white c-flex-center c-pb48 c-br20 c-p c-ww520">
        <div class="c-fs28 c-fc-xblack c-pt40">{{userType==2?'请选择PC/小程序直播间':'PC直播间'}}</div>
        <div v-if="userType==2">
          <div class="c-pt50 c-pb10 c-fs24 c-fc-sblack c-ww440 c-textAlign-l c-flex-row">
            <i class="iconfont c-fs16 theme-fc c-pt8 c-mr8">&#xe8ed;</i><span><b class="c-fw-n theme-fc">小程序直播间：</b>长按识别/或微信扫描下方二维码进入小程序</span>
          </div>
          <div class="c-ww200 c-m-0auto"><img class="c-w100" :src="$addXossFilter(this.miniCodeUrl, require('../../../assets/defult270.png'))" /></div>
        </div>
        <div class="c-pt20 c-pb20 c-fs24 c-fc-sblack c-ww440 c-textAlign-l c-flex-row">
          <i class="iconfont c-fs16 theme-fc c-pt8 c-mr8">&#xe8ed;</i><span><b class="c-fw-n theme-fc">PC直播间：</b>点击按钮复制链接，通过谷歌浏览器打开链接</span>
        </div>
        <div @click="copyText" class="c-ww200 c-hh50 c-flex-row c-flex-center c-fc-white c-fs22 c-br30 theme-bg-gradient">复制链接</div>
      </div>
    </cj-popup >
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js";
const LIMIT = 20;
let page = 1;
let isClicking = false;
export default {
  name: "PerfectInfo",
  components: {
    loadingStatusTem,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: [],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      showEnterPcTip: false,
      liveInfo: {
        pcLiveUrl: ''
      },
      detailInfo: {

      },
      classId: this.$route.query.classId,
      miniCodeUrl: "",
      pcLiveUrl: "",
      secretKey: "",
      last_page: 0,
      userType: '',
      isPc: false,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    //分享
    wechatShare: function () {
      let title = "直播课程列表"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "直播课程列表"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    copyText() {
      if (this.userType == 2) {
        utilJs.copyText(this.pcLiveUrl + '&pwd=' + this.secretKey);
      } else {
        utilJs.copyText(this.pcLiveUrl);
      }
    },
    copysecretKey() {
      utilJs.copyText(this.secretKey);
    },
    //获取详情
    getDetailList() {
      console.log(this.$router)
      let $this = this
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}livePrivateClass/${this.$route.query.classId}/detailList?page=${page}&limit=${LIMIT}`,
        res => {
          this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          if (res.code == 507) {
            // this.$showCjToast({
            //   text: res.msg,
            //   type: "warn",
            //   time: 3000,
            // onHide() {
            $this.clickClassId($this.$route.query.classId)
            // }
            // });
            return
          }
          this.last_page = res.last_page
          if (page == 1) {
            this.liveList = res.data;
          } else {
            this.liveList = [...this.liveList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            page++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //获取详情
    getLiveInfo() {
      utilJs.getMethod(
        global.apiurl + "livePrivateClass/" + this.$route.query.classId,
        res => {
          this.detailInfo = res
          this.detailInfo.classBeginAt = this.getTimeByDate(res.classBeginAt)
          this.detailInfo.endAt = this.getTimeByDate(res.endAt)
          var myDate = new Date()
          if (utilJs.getTimeByDate(res.applyEndAt) >= myDate.getTime()) {
            this.classOver = false
          } else {
            this.classOver = true
          }
        }
      );
    },
    clickClassId(classId) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      this.iosAppRouteChange(toPath);
    },
    //获取详情
    getliveRoomUrl(detailId) {
      utilJs.getMethod(
        global.apiurl + `livePrivateClass/${detailId}/liveRoomUrl`,
        res => {
          this.miniCodeUrl = res.miniCodeUrl
          this.pcLiveUrl = res.pcLiveUrl
          this.secretKey = res.secretKey
          this.userType = res.userType
          this.showEnterPcTip = true
          console.log(this.userType)
        }
      );
    },
    getTimeByDate: function (dateStr) {
      if (dateStr != '' && dateStr != null && dateStr != undefined) {
        let time = 0;
        let timeHead = dateStr.split(" ")[0].split("-");
        let timeEnd = dateStr.split(" ")[1].split(":");
        time = timeHead[0] + '年' + parseInt(timeHead[1]) + '月' + timeHead[2] + '日 ' + timeEnd[0] + ':' + timeEnd[1];
        return time;
      } else {
        return 0;
      }
    },
    initData() {
      page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.liveList = [];
      this.isPc = !utilJs.isMobileUserAgent();
      this.getLiveInfo();
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickGoLiveDetail(classId) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      this.iosAppRouteChange(toPath);
    },
    addUserToSocailRoom(liveId, SocialRoomId, detailId) {
      let postData = {
        "isCombos": 0,
        "socialRoomId": SocialRoomId,
        "refereeId": localStorage.getItem("refereeId")
      }
      utilJs.postMethod(global.apiurl + "social/addSocialRoom", postData, res => {
        isClicking = false;
        this.$routerGo(this, "push", { path: "/homePage/privateClass/privateLiveRoom?liveId=" + liveId + "&SocialRoomId=" + SocialRoomId + "&detailId=" + detailId })
      }, failRes => {
        isClicking = false;
      })
    },
    review(liveId, SocialRoomId, detailId, isJoinSocial) {
      if (isJoinSocial == 1) {
        this.$routerGo(this, "push", { path: "/homePage/privateClass/privateLiveRoom?liveId=" + liveId + "&SocialRoomId=" + SocialRoomId + "&detailId=" + detailId })
      } else {
        if (isClicking) {
          return;
        }
        isClicking = true;
        this.addUserToSocailRoom(liveId, SocialRoomId, detailId);
      }
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.liveList.length > 0) {
          this.getDetailList();
        }
      });
    },
    saveProgress: function () {
      let classId = this.$route.query.classId;
      let data = {
        prodId: classId,
        prodType: 115,
        cId: "",
        progress: 1,
        duration: 0,
        cType: ""
      }
      let postUrl = `${global.apiurl}analysis/course/progressLog`;
      utilJs.postMethod(postUrl, data, res => { });
      // let classId = this.$route.query.classId;
      // utilJs.postMethod(global.apiurl + "livePrivateClass/progress", { classId: classId }, res => {
      // }, failRes => {
      // }
      // );
    }
  },
  activated() {
    setDocumentTitle("课节列表");// eslint-disable-line
    this.initData();
    this.getDetailList();
    this.wechatShare();
    this.saveProgress();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.line {
  background: linear-gradient(
    270deg,
    rgba(72, 147, 248, 0.6) 0%,
    rgba(72, 147, 248, 1) 100%
  );
}
.liveList:last-child {
  border-bottom: 1px solid #f2f2f2;
}
.spot {
  background: #f56c6c;
  width: 0.3rem;
  height: 0.3rem;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin: 0 0.25rem;
}
.icon-shipin6 {
  width: 0.7rem;
  background: url(../../../assets/vidio.png) no-repeat center;
  height: 0.5rem;
  display: inline-block;
  background-size: 100%;
  vertical-align: middle;
}
.c-br-bl20 {
  border-bottom-left-radius: 0.5rem;
}
.c-bg4893F8 {
  background: rgba(72, 147, 248, 0.05);
}
.c-mr6 {
  margin-right: 0.15rem;
}
</style>
